<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.small{width: 350px;height: 350px;background-image: url(img/min.jpg);position: relative;border: 1px solid red ;float: left;}
		.big{width: 400px;height: 400px;float: left;border: 1px red solid;background-image: url(img/max.jpg);display: none;}
		.yellow{width: 175px;height: 175px;background-color: yellow;opacity: 0.3;position: absolute;display: none;}
	</style>
</head>
<body>
	<div class="small">
		<div class="yellow"></div>
	</div>
	<div class="big"></div>
</body>
<script type="text/javascript">
	var big = document.getElementsByClassName("big")[0];
	var small = document.getElementsByClassName("small")[0];
	var yellow = document.getElementsByClassName("yellow")[0];

	small.onmouseover = function(ev){
		big.style.display = "block";
		yellow.style.display = "block";
	}
	small.onmouseout = function(ev){
		big.style.display = "none";
		yellow.style.display = "none";
	}
	small.onmousemove = function(ev){
		var x = ev.clientX - small.offsetLeft;
		var y = ev.clientY - small.offsetTop;
		console.log(x, y);
		x = x - 87.5;
		y -= 87.5;
		x = x <0 ? 0 : (x > 175 ? 175 : x);
		y = y <0 ? 0 : (y > 175 ? 175 : y);
		yellow.style.top = y + "px";
		yellow.style.left = x + "px";

		var bX = -x / 350 * 800;
		var bY = -y / 350 * 800;
		big.style.backgroundPosition = ""+bX+"px "+bY+"px"
	}
</script>
</html>